<template>
    <n-grid x-gap="12" :cols="2">
        <n-gi>
            <n-space v-if=" !isBatchOperation && fileType === 0">
                <n-button type="primary" size="large" @click="handleUploadFileBtnClick('1')">
                    上传
                </n-button>
                <n-button type="primary"   size="large"  @click="handleClickAddFolderBtn()">
                  新建
                </n-button>
                <n-alert :show-icon="false" type="success"> 如果点击上传无反应，请按F5刷新网页</n-alert>
            </n-space>

            <n-space v-if="isBatchOperation">
              <n-button type="info" v-if="selectedFiles.length >0" @click="handleBatchDelete()">
                批量删除
              </n-button>
              <n-button type="info" v-if="selectedFiles.length" @click="handleClickAddFolderBtn()">
                批量移动
              </n-button>
              <n-button type="info" v-if="selectedFiles.length" @click="handleClickAddFolderBtn()">
                批量下载
              </n-button>
              <n-button type="info" v-if="selectedFiles.length" @click="handleClickAddFolderBtn()">
                批量分享
              </n-button>
            </n-space>
        </n-gi>
        <n-gi>
            <n-space justify="end">

                <n-input placeholder="搜索你的文件" />
                <n-popover trigger="hover">
                  <template  #trigger>
                    <n-button @click="handleBatchOperationChange()">
                      <n-icon><CheckmarkDoneIcon /></n-icon>
                    </n-button>
                  </template>
                  <span>{{isBatchOperation? '取消批量操作':'批量操作'}}</span>
                </n-popover>


                <n-button @click="refresh">
                    <template #icon>
                        <n-icon><cash-icon /></n-icon>
                    </template>
                    刷新
                </n-button>
            </n-space>
        </n-gi>
    </n-grid>
</template>

<script lang="ts" setup>
import { useMessage } from 'naive-ui'
import { CashOutline as CashIcon , CheckmarkDone as CheckmarkDoneIcon} from '@vicons/ionicons5'
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'
import {computed, onBeforeUnmount, onMounted, defineEmits, ref} from "vue";
import {FilePanStore} from "@/store/modules/file";
const filePanStore = FilePanStore();

const message = useMessage();
const emit = defineEmits()




const props = defineProps({
  filePath : {
    type: String,
    required: true
  },
  fileType : {
    type: Number,
    required: true
  }
})


const isBatchOperation = computed(() => {
  return filePanStore.getIsBatchOperation
})

const selectedFiles = computed(() => {
  return filePanStore.getSelectedFiles
})


const refresh = () => {
  Bus.emit('refreshFileList')
  console.log(Bus)
}

/**
 * 上传文件参数
 * @description 上传文件时，给服务端的额外参数
 * @returns {Object}
 */
const uploadFileParams = computed(() =>{
  return {
    filePath: props.filePath,
    isDir: 0
  }
})

/**
 * 上传文件按钮点击事件
 * @description 通过Bus通信，开启全局上传文件流程
 * @param {boolean} uploadWay 上传方式 0-文件上传 1-文件夹上传 2-粘贴图片或拖拽上传
 */
const handleUploadFileBtnClick = (uploadWay:string) => {
  console.log("uploadFileParams:"+uploadFileParams.value.filePath)
    // 打开文件选择框
  Bus.emit('openUploader', {
      // 给服务端的额外参数
      params_: uploadFileParams,
      // 上传方式
      uploadWay_: uploadWay,
      callType_: 1
  })
}


const handleBatchDelete = ()=>{
  // Bus.emit('imgPreview', {imgList, currentIndex})
  let isBatchOperation = true
  let fileInfo= selectedFiles.value
  let deleteMode = props.fileType===6?2:1
  // 单独操作
  Bus.emit('showDeleteFile',{isBatchOperation , fileInfo, deleteMode})
}

/**
 * 网格模式下，批量操作状态切换
 */
const handleBatchOperationChange = () =>{
  filePanStore.setIsBatchOperation(!filePanStore.getIsBatchOperation)
}


/**
 * 新建文件夹按钮点击事件
 * @description 调用新建文件夹服务，并在弹窗确认回调事件中刷新文件列表
 */
const handleClickAddFolderBtn = () => {
  Bus.emit('showAddFolderDialog')
}


onMounted(() => {
    // 文件选择后的回调
    Bus.on('fileAdded', () => {
        console.log('文件已选择')
    })

    // 文件上传成功的回调
    Bus.on('fileSuccess', () => {
        console.log('文件上传成功')
    })
})

onBeforeUnmount(() => {
    Bus.off('fileAdded')
    Bus.off('fileSuccess')
})


</script>

<style>
.light-green {
    background-color: rgba(0, 128, 0, 0.12);
}
.green {
    background-color: rgba(0, 128, 0, 0.24);
}
</style>
